import React, { useState } from 'react'
import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { updateafter,getafterdetail } from '../../../../request/api'
import Pop_up_layers from './Pop_up_layers'


export default function To_be_reviewed(props) {
    const { afterdata, getid,getall } = props
    console.log(afterdata);
    

    const [model_type, setmodel_type] = useState(false)
    const updatmodel_type= (item:boolean)=>{
        setmodel_type(item)
    }

    type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
    const columns: TableColumnsType = [
        { title: '售后ID', dataIndex: 'key' },
        { title: '申请时间', dataIndex: 'Application_timeline' },
        { title: '关联订单', dataIndex: 'order_id' },
        { title: '所属用户', dataIndex: 'user' },
        { title: '自提点名称', dataIndex: 'zitidian' },
        { title: '退款金额', dataIndex: 'Refund_amount' },
        { title: '售后类型', dataIndex: 'After_sales_type' },
        { title: '售后原因', dataIndex: 'After_sales_type_cause' },
        {
            title: '操作',
            key: '_id',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        if (selectedRowKeys.length == 0) {
                            alert('请选择订单')
                        } else if (selectedRowKeys.length > 1) {
                            alert('只能选择一个订单')
                        } else {
                            Getafterdetail()
                        }
                    }}>查看 </a>
                    <a onClick={() => {
                        if (selectedRowKeys.length == 0) {
                            alert('请选择订单')
                        } else if (selectedRowKeys.length > 1) {
                            alert('只能选择一个订单')
                        } else {
                            Updateafter('已通过')
                        }
                    }}>通过 </a>
                    <a onClick={() => {
                        if (selectedRowKeys.length == 0) {
                            alert('请选择订单')
                        } else if (selectedRowKeys.length > 1) {
                            alert('只能选择一个订单')
                        } else {
                            Updateafter('已驳回')
                        }
                    }}>驳回 </a>
                </Space>
            ),
        },
    ];




    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    // 数据渲染
    const dataSource = afterdata.filter(ele => ele.After_sales_state == '待审核').map((item) => ({
        key: item._id,
        Application_timeline: item.Application_timeline,
        order_id: item.order_id._id,
        user: item.order_id.name,
        zitidian: item.zitidian,
        Refund_amount: item.Refund_amount,
        After_sales_type: item.After_sales_type,
        After_sales_type_cause: item.After_sales_type_cause,
    }));


    // 选择项
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
        getid(newSelectedRowKeys)
    };
    const rowSelection: TableRowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;




    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };



    // 修改状态
    const Updateafter = async (item: string) => {
        let from = {
            list_id:selectedRowKeys,
            item,
        }
        const data: any = await updateafter({ from })
        if (data.code == 200) {
            alert('修改成功')
            getall(data.code)
        }
    }
    // 获取详细数据售后数据
    const [after_data,setafter_data] = useState<any>({})
    const Getafterdetail  = async()=>{
        setmodel_type(true)
        const res = await getafterdetail({_id:String(selectedRowKeys[0])})
        setafter_data(res.data)
    }




    return (
        <div>
            <Flex gap="middle" vertical>
            <Pop_up_layers model_type={model_type} updatmodel_type={updatmodel_type} after_data={after_data}></Pop_up_layers>
                <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource}  />
            </Flex>
        </div>
    )
}
